/**
 * React.memo 总结（用在组件上的，一般是子组件）
    使用场景：
    当子组件接收的 props 不经常变化时
    当组件重新渲染的开销较大时
    当需要避免不必要的渲染时

    优点：
    通过记忆化避免不必要的重新渲染
    提高应用性能
    减少资源消耗

    注意事项：
    不要过度使用，只在确实需要优化的组件上使用
    对于简单的组件，使用 memo 的开销可能比重新渲染还大
    如果 props 经常变化， memo 的效果会大打折扣
 */

/**
 * useMemo 总结（用在state上的）
    使用场景：
    当需要缓存复杂计算结果时
    当需要避免不必要的重新计算时
    当计算逻辑复杂且耗时时

    优点：
    通过记忆化避免不必要的重新计算
    提高应用性能
    减少资源消耗

    注意事项：
    不要过度使用，只在确实需要优化的组件上使用
    如果依赖项经常变化，useMemo 的效果会大打折扣
    如果计算逻辑简单，使用 useMemo 的开销可能比重新计算还大
 */

import { useState, useMemo } from "react";
export default function Demo09() {
  const [search, setSearch] = useState("");
  const [goods, setGoods] = useState([
    { id: 1, name: "苹果", price: 10, count: 1 },
    { id: 2, name: "香蕉", price: 20, count: 1 },
    { id: 3, name: "橘子", price: 30, count: 1 },
  ]);
  const handleAdd = (id: number) => {
    setGoods(
      goods.map((item) =>
        item.id === id ? { ...item, count: item.count + 1 } : item
      )
    );
  };
  const handleSub = (id: number) => {
    setGoods(
      goods.map((item) =>
        item.id === id ? { ...item, count: item.count - 1 } : item
      )
    );
  };
  const total = useMemo(() => {
    console.log("total");
    return goods.reduce((total, item) => total + item.price * item.count, 0);
  }, [goods])
  return (
    <>
      <h1>useMemo示例</h1>
      <h1>父组件</h1>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <table border={1} cellPadding={5} cellSpacing={0} width={600}>
        <thead>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
          </tr>
        </thead>
        <tbody>
          {goods.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.price * item.count}</td>
              <td>
                <button onClick={() => handleAdd(item.id)}>+</button>
                <span>{item.count}</span>
                <button onClick={() => handleSub(item.id)}>-</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <h2>总价：{total}</h2>
    </>
  );
}
